<template>
  <div>
    <!--查询条件start --111s-->
    <el-card>
      <el-form :inline="true" :model="query" class="query-form" size="small">
        <!--0:待付款 1:待发货  2:待收货 3:已完成 4:退款-->
        <el-form-item>
          <span>订单状态：</span>
          <el-select
            v-model="query.onshelfstatus"
            placeholder="请选择订单状态"
            @change="shelfstatus"
            clearable
          >
            <el-option label="待付款" value="0"> </el-option>
            <el-option label="待发货" value="1"> </el-option>
            <el-option label="待收货" value="2"> </el-option>
            <el-option label="已完成" value="3"> </el-option>
            <el-option label="已关闭" value="4"> </el-option>
            <el-option label="已取消" value="5"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="query-form-item">
          <el-input
            v-model="query.content"
            placeholder="订单号/买家/买家联系方式"
            prefix-icon="el-icon-search"
            @keyup.enter.native="onSubmit"
            clearable
            style="width: 480px"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-refresh"
            @click="onRest"
          ></el-button>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit"
            >查询</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-download"
            @click="downloadExcel"
            >导出</el-button
          > </el-form-item
        ><br />
      </el-form>
      <el-form :inline="true" :model="query" class="query-form" size="small">
        <el-form-item>
          <span>时间查询：</span>
          <el-date-picker
            v-model="createTime"
            unlink-panels
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="left"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
            @change="dateChange"
          ></el-date-picker>
        </el-form-item>
        <!--时间段-->
        <el-button
          type="primary"
          :plain="today"
          @click="todayclick()"
          style="height: 31.99px; padding: 10px 20px"
          >今天</el-button
        >
        <el-button
          type="primary"
          :plain="yestoday"
          @click="yestodayclick()"
          style="height: 31.99px; padding: 10px 20px"
          >昨天</el-button
        >
        <el-button
          type="primary"
          :plain="week"
          @click="weekclick()"
          style="height: 31.99px; padding: 10px 20px"
          >一周内</el-button
        >
        <el-button
          type="primary"
          :plain="month"
          @click="monthclick()"
          style="height: 31.99px; padding: 10px 20px"
          >一月内</el-button
        >
      </el-form>
      <!--列表start --222s-->
      <el-table
        :data="list"
        :header-cell-style="{ background: '#F4F4F5', color: '#606266' }"
        style="width: 100%"
        @selection-change="selectChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="ID/订单号" prop="OrderNumber"></el-table-column>
        <el-table-column
          label="商品名称"
          prop="commodityname"
          width="100"
        ></el-table-column>
        <el-table-column label="商品规格" prop="inventory" width="100">
          <template slot-scope="scope">
            <span>
              {{
                scope.row.inventory
                  .toString()
                  .replace(/\"/g, "")
                  .replace(/\{|}/g, "")
              }}</span
            >
          </template>
        </el-table-column>

        <el-table-column label="卖家信息">
          <template slot-scope="scope">
            <span v-if="scope.row.OrderType == 2">{{
              scope.row.companyname
            }}</span>
            <span v-else-if="scope.row.OrderType == 1">平台</span>
            <span v-else>{{ scope.row.sellerenterpriseName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="购买信息" align="left">
          <template slot-scope="scope">
            【姓名】
            <span>{{ scope.row.UserAddressName }}</span>
            <br />
            【手机号】{{ scope.row.UserAddressPhone }}
            <br />
            【地址】{{ scope.row.provinceName }}
            {{ scope.row.cityName }}
            {{ scope.row.areaName }}
            {{ scope.row.UserAddress }}
          </template>
        </el-table-column>
        <el-table-column
          label="数量 / 价格(元)"
          prop="OrderRealPrice"
          align="center"
          width="150"
        >
        </el-table-column>
        <el-table-column label="支付方式" width="100">
          <template slot-scope="scope">
            <span>余额支付</span>
          </template>
        </el-table-column>

        <el-table-column label="订单状态" width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.OrderStatus }}</span>
          </template>
        </el-table-column>
        <!--el-table-column
                label="获取积分"
                prop="createintegral">
            </el-table-column-->
        <el-table-column
          label="创建时间"
          with="200"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <i class="el-icon-time" v-if="scope.row.CreateTime != null"></i>
            <span v-if="scope.row.CreateTime != null">
              {{ scope.row.CreateTime | formatDateStr("yyyy-MM-dd hh:mm:ss") }}
            </span>
          </template>
        </el-table-column>
      </el-table>
      <!--分页模块start-->
      <el-pagination
        class="pagination-container"
        background
        :page-size="query.pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total,sizes,prev, pager, next, jumper"
        :current-page="query.currentPage"
        :page-sizes="[5, 10, 20, 30, 50]"
        :total="totalNumber"
      ></el-pagination>
      <!--分页模块end-->

      <!--收货-->
      <el-dialog
        :title="formMap[formName]"
        :visible.sync="formVisible"
        :before-close="hideForm"
        width="50%"
        top="5vh"
        v-dialogDrag
      >
        <el-form v-model="shouhuo.receivingdoodsdays">
          <el-form-item label="收货时间:">
            <el-input style="width: 200px" v-model="shouhuo.receivingdoodsdays">
            </el-input>
            天
          </el-form-item>
        </el-form>
        如果用户规定时间内没有确认收货，且未提交任何售后信息，则系统自动确认收货
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="hideForm">取消</el-button>
          <el-button
            type="primary"
            @click.native="updateReceiving()"
            :loading="formLoading"
            >提交</el-button
          >
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { getAllOrderList } from "../../api/buscommodity/buscommodityOrder";
import { BASE_URL } from "../../config/app";
/*用作表单的数据初始化*/
const formJson = {
  OrderId: 1,
  UserId: 1,
  OrderNumber: "", //订单号
  OrderStatus: "",
  UserAddressName: "",
  UserAddressPhone: "",
  ProvinceId: "",
  CityId: "",
  AreaId: "",
  UserAddress: "",
  OrderRealPrice: "",
  purchasetype: "",
  PaymentType: "--",
  outtradeno: "",
  usercouponid: "",
  paytime: "",
  OrderRealPrice: "",
  postage: "",
  integralnum: "",
  orderrefundprice: "",
  CreateTime: "",
  exchangevalue: "",
  moneyvalue: "",
  orderisdel: "",
  secondordersPC: [],
};
const formreceiving = {
  id: "",
  receivingdoodsdays: "",
};

export default {
  name: "order",
  data() {
    return {
      formData: formJson,
      pickerOptions: {
        //快速选择日期
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近六个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      today: true,
      yestoday: true,
      week: true,
      month: true,
      query: {
        //查询条件
        content: "",
        UserId: "", //用户id
        onshelfstatus: "",
        currentPage: 1,
        pageSize: 5,
        starttime: "",
        endtime: "",
        orderid: "",
      },
      createTime: [], //选择日期时需要的model
      list: [], //列表集合
      totalNumber: 0, //分页总页数
      // formVisible: false,//添加编辑显示
      loading: true, //列表加载
      formLoading: false, //表单提交加载
      allLoding: false, //全屏加载
      cancelToggle: false,
      detailVisible: false, //查看
      //multipleSelection: [], //多选集
      shouhuodata: {},
      shouhuo: formreceiving, //收货商城
      formName: "",
      formMap: {
        add: "自动收货期限",
      },
      formVisible: false, //收货
    };
  },
  methods: {
    selectChange(val) {
      let arr = [];
      val.forEach((v) => {
        arr.push(v.OrderId);
      });

      this.query.orderid = arr.join(",");
    },
    // 订单导出
    async downloadExcel() {
      try {
        let {
          content,
          onshelfstatus,
          starttime,
          endtime,
          orderid,
        } = this.query;
        if (!orderid && !content && !onshelfstatus && !starttime && !endtime) {
          const flag = await this.$confirm(
            "您将导出全部订单,所需时间较长,确认后导出",
            "提示",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }
          );
        }
        if (!orderid) {
          orderid = "";
        }
        window.location.href =
          BASE_URL +
          "/goldendays-order/busiAllOrders/queryCommodityOrderPcFrom?content=" +
          content +
          "&onshelfstatus=" +
          onshelfstatus +
          "&starttime=" +
          starttime +
          "&endtime=" +
          endtime +
          "&orderid=" +
          orderid;
      } catch {
        this.$message.info("已取消");
      }
    },
    //订单详细
    todetail(row) {
      if (row !== null) {
        this.$router.push({
          path: "/statistics/orderdetail",
          query: { orderid: row.orderid },
        });
      }
    },

    fun_date(aa) {
      var date1 = new Date(),
        time1 =
          date1.getFullYear() +
          "-" +
          (date1.getMonth() + 1) +
          "-" +
          date1.getDate() +
          " " +
          date1.getHours() +
          ":" +
          date1.getMinutes() +
          ":" +
          date1.getSeconds(); //time1表示当前时间
      var date2 = new Date(date1);
      this.query.endtime = time1;
      date2.setDate(date1.getDate() - aa);
      var time2 =
        date2.getFullYear() +
        "-" +
        (date2.getMonth() + 1) +
        "-" +
        date2.getDate() +
        " " +
        date2.getHours() +
        ":" +
        date2.getMinutes() +
        ":" +
        date2.getSeconds();
      this.query.starttime = time2;
      // alert(this.query.starttime+this.query.endtime)
    },

    //今天
    todayclick() {
      var date1 = new Date();
      var time2 =
        date1.getFullYear() +
        "-" +
        (date1.getMonth() + 1) +
        "-" +
        date1.getDate();
      this.query.starttime = time2 + " " + "00:00:00";
      this.query.endtime = time2 + " " + "23:59:59";
      this.query.currentPage = 1;
      (this.today = false),
        (this.yestoday = true),
        (this.week = true),
        (this.month = true),
        this.getAllOrderList();
    },
    //昨天
    yestodayclick() {
      var date1 = new Date();
      var date2 = new Date(date1);
      date2.setDate(date1.getDate() - 1);
      var time2 =
        date2.getFullYear() +
        "-" +
        (date2.getMonth() + 1) +
        "-" +
        date2.getDate() +
        " ";
      this.query.starttime = time2 + " " + "00:00:00";
      this.query.endtime = time2 + " " + "23:59:59";
      this.query.currentPage = 1;
      (this.today = true),
        (this.yestoday = false),
        (this.week = true),
        (this.month = true),
        this.getAllOrderList();
    },
    //周内
    weekclick() {
      this.fun_date(7);
      this.query.currentPage = 1;
      (this.today = true),
        (this.yestoday = true),
        (this.week = false),
        (this.month = true),
        this.getAllOrderList();
    },
    //月内
    monthclick() {
      this.fun_date(30);
      this.query.currentPage = 1;
      (this.today = true),
        (this.yestoday = true),
        (this.week = true),
        (this.month = false),
        this.getAllOrderList();
    },

    /*获取列表事件*/
    getAllOrderList() {
      this.loading = true;
      this.list = [];
      getAllOrderList(this.query)
        .then((response) => {
          if (response.code != 0) {
            this.$message.error(response.message);
            return false;
          }
          let datalist = response.data.list || [];
          if (datalist.length > 0) {
            let mylist = datalist;
            for (var i = 0; i < mylist.length; i++) {
              if (mylist[i].OrderStatus != null) {
                mylist[i].OrderStatus = mylist[i].OrderStatus.toString();
              }
              if (mylist[i].onshelfstatus != null) {
                mylist[i].onshelfstatus = mylist[i].orderstatus.toString();
              }
              if (mylist[i].OrderRealPrice != null) {
                let num = null;
                num = mylist[i].purchasenum;
                mylist[i].OrderRealPrice = num + "/" + mylist[i].OrderRealPrice;
              }

              if (mylist[i].PaymentType != null) {
                mylist[i].PaymentType = mylist[i].PaymentType.toString();
                if (mylist[i].PaymentType == "1") {
                  mylist[i].PaymentType = "微信";
                } else if (mylist[i].PaymentType == "2") {
                  mylist[i].PaymentType = "支付宝";
                } else if (mylist[i].PaymentType == "3") {
                  mylist[i].PaymentType = "银联";
                } else {
                  mylist[i].PaymentType = "积分购买";
                }
              } else {
                // mylist[i].PaymentType = "--";
              }
              if (mylist[i].OrderStatus != null) {
                mylist[i].OrderStatus = mylist[i].OrderStatus.toString();
                if (mylist[i].OrderStatus == "0") {
                  mylist[i].OrderStatus = "待付款";
                } else if (mylist[i].OrderStatus == "1") {
                  mylist[i].OrderStatus = "待发货";
                } else if (mylist[i].OrderStatus == "2") {
                  mylist[i].OrderStatus = "待收货";
                } else if (mylist[i].OrderStatus == "3") {
                  mylist[i].OrderStatus = "已完成";
                } else if (mylist[i].OrderStatus == "4") {
                  mylist[i].OrderStatus = "已关闭";
                } else if (mylist[i].OrderStatus == "5") {
                  mylist[i].OrderStatus = "已取消";
                } else {
                  mylist[i].OrderStatus = "";
                }
              }
            }
            this.list = mylist;
          }

          this.totalNumber = response.data.totalNumber || 0;
          console.info(this.list);
          setTimeout(() => {
            this.loading = false;
          }, 0.3 * 1000);
        })
        .catch(() => {
          this.loading = false;
          this.list = [];
        });
    },
    tableRowClassName() {
      return "success-row";
    },
    /*日期选择事件*/
    dateChange(val) {
      if (val == null) {
        this.query.starttime = "";
        this.query.endtime = "";
      } else {
        this.query.starttime = val[0];
        this.query.endtime = val[1];
        this.query.currentPage = 1;
      }
      this.getAllOrderList();
    },
    /*列表查询条件事件*/
    onSubmit() {
      this.query.currentPage = 1;
      this.getAllOrderList();
    },
    onRest() {
      this.createTime = [];
      (this.query = {
        //查询条件
        content: "",
        userid: "", //用户id
        onshelfstatus: "",
        currentPage: 1,
        pageSize: 5,
        starttime: "",
        endtime: "",
      }),
        (this.today = true);
      this.yestoday = true;
      this.week = true;
      this.month = true;
      this.getAllOrderList();
    },
    //下拉框状态
    shelfstatus() {
      this.query.currentPage = 1;
      this.$router.push({
        path: "",
        query: this.query,
      });

      this.getAllOrderList();
    },
    /*点击页数*/
    handleCurrentChange(val) {
      this.query.currentPage = val;

      this.getAllOrderList();
    },

    /*选择每页条数【10,20,30,40,50】*/
    handleSizeChange(val) {
      this.query.pageSize = val;
      this.getAllOrderList();
    },
    // 显示收货表单
    handleForm() {
      this.formVisible = true;
      this.formName = "add";
      this.shouhuo = Object.assign({}, this.shouhuodata);
    },
    hideForm() {
      // 更改值
      this.formVisible = !this.formVisible;
      return true;
    },
  },
  mounted() {
    this.query.userid = this.$route.query.userid;
  },
  created() {
    this.getAllOrderList();
  },
};
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
